<template>
  <div class="inner">
    <div>
      <div class="title">
        <p>志愿者之家</p>
      </div>
      <div>
        <img class="zyz_bg" src="../../assets/image/zyz_bg.png" alt />

        <p class="center_title">简介</p>

        <div class="jianjie_content">
          2019年10月26日，舟山博物馆在四楼多功能教育厅成功举办19届舟博志愿社志愿者培训班，来自浙江海洋大学、浙江国际海运职业技术学院、东海科学技术学院等院校的85名新晋志愿者参加为期一天的培训。
          今年的志愿者相对往年来说，不仅人数增加，在服务要求上更是严格。为此舟山博物馆针对培训内容进行了精心组织，除了《认识博物馆》，今年新增《舟山博物馆志愿者工作须知》，把馆内所有的志愿者工作内容以及注意事项进行全面解析，以便更好的开展志愿服务，响应创城工作，同时邀请博物馆宣传教育部相关负责人为新晋志愿者授课。通过文博专业知识、志愿者礼仪规范、志愿者日常工作解析、实地示范讲解等，带领大家深度解读舟山博物馆，了解舟博志愿社。培训结束后，舟山博物馆舟博志愿社总结汇报了2019年度志愿者的服务情况,并对在该年度志愿服务活动中表现突出的14名志愿者进行先进优秀表彰，颁发奖状以及舟山博物馆特别定制的礼品，以便更好地激发志愿者的热情。
          通过此次培训，志愿者深入了解了博物馆志愿者工作的流程，同时深化了大家对于舟山本地历史的了解。作为舟山博物馆重要的服务力量，全体志愿者将不断提升自身素质，增强志愿服务意识，致力社会公益事业的发展。
        </div>

        <p class="center_title">
          <span>章程</span>
          <span>详情</span>
        </p>

        <div class="zhangcheng_content">
          <p class="small_title">第一章 总则</p>
          <p class="diyizhang">第一章 根据国家志愿者相关条例</p>
          <p class="diyizhang">第二条 志愿者是基于良知</p>

          <p class="diyizhang">第三条 博物馆志愿者是利用自身特长来补充博物馆人力资源</p>
          <p class="small_title" style="margin-top:60px">第二章 总则</p>
          <p class="diyizhang">第四条 博物馆志愿者是利用自身特长来补充博物馆人力资源</p>
        </div>
        <p class="center_title">
          <span>志愿者招募</span>
          <span>详情</span>
        </p>
        <ul class="zjz_li">
          <li>
            <span>【志愿者招募】2020年舟山市博物馆志愿者招募公告</span>
          </li>
          <li>
            <span>【志愿者招募】2020年舟山市博物馆志愿者招募公告</span>
          </li>
          <li>
            <span>【志愿者招募】2020年舟山市博物馆志愿者招募公告</span>
          </li>
          <li>
            <span>【志愿者招募】2020年舟山市博物馆志愿者招募公告</span>
          </li>
          <li>
            <span>【志愿者招募】2020年舟山市博物馆志愿者招募公告</span>
          </li>
        </ul>
        <p class="center_title">
          <span>志愿者风采</span>
          <span>详情</span>
        </p>
        <ul class="zjz_li">
          <li>【志愿者招募】2020年舟山市博物馆志愿者招募公告</li>
          <li>【志愿者招募】2020年舟山市博物馆志愿者招募公告</li>
          <li>【志愿者招募】2020年舟山市博物馆志愿者招募公告</li>
          <li>【志愿者招募】2020年舟山市博物馆志愿者招募公告</li>
          <li>【志愿者招募】2020年舟山市博物馆志愿者招募公告</li>
        </ul>
      </div>
      <div>
        <div class="ljbm_bg">
          <p @click="tankuang()">立即报名</p>
        </div>
        <div class="tankuang_bg">
          <el-dialog :visible.sync="dialogTableVisible" :center="true">
            <div class="content_k">
              <p class="content_k_title">志愿者报名</p>
              <ul>
                <li class="input_bg">
                  <label for>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
                  <input v-model="name1" type="text" />
                </li>
                <li class="radio">
                  <label for>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
                  <p>
                    <span>男</span>
                    <input type="radio" value="One" v-model="man" />
                    <span>女</span>
                    <input type="radio" value="Twe" v-model="man" />
                  </p>
                </li>
                <li class="input_bg">
                  <label for>联系方式</label>
                  <input type="text" v-model="mobile" />
                </li>
                <li class="input_bg">
                  <label for>身份证号</label>
                  <input type="text" v-model="sfz" />
                </li>
                <li class="xiazai">
                  <label>请先下载模板,填写完毕后上传</label>
                  <div class="btns">
                    <div id="a1" @click="xiazai()">模板下载</div>
                  </div>
                </li>
                <li>
                  <p class="shangchuan">
                    <el-upload
                      class="upload-demo"
                      :action="getFileUrl()"
                      name="file"
                      :on-change="handleChange"
                      :headers="tokenHeader"
                      accept=".txt"
                    
                    >
                      点击上传
                      <!-- <div slot="tip" class="el-upload__tip">只能上传文件，且不超过500kb</div> -->
                    </el-upload>
                  </p>
                </li>
                <li class="yanzhengma">
                  <label for>验证码</label>
                  <p>
                    <input type="text" />
                    <span class="shuzi"></span>
                    <span>看不清,点击切换</span>
                  </p>
                </li>
              </ul>
              <p class="btn" @click="over">点击完成</p>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
            //这里填写你存储的token
      tokenHeader: { Authorization: localStorage.getItem("token") },
      name1: "",
      fileName: "",
      man: "",
      mobile: "",
      year: "",
      sfz: "",
      mail: "",
      fileName: "",
      filePath: "",
      xiazai1: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      activeName: "first",
      // message: [{}],
      right: true,
      newxx: [{}],
      productList: [{}], //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 5, // 每页显示数量
      currentPageData: [] //当前页显示内容
    };
  },
  // mounted(){
  //   this.xiazai
  // },
  methods: {
    
    //下载功能
    xiazai() {
   
      this.$api
        .post(this.zs+"/volunteer/apply/download")
        .then(res => {
          this.getUrlBase64(
            "http://47.99.59.109/zhoushanManager/upload/17e0c14dbb0d878e11d41dae2fce66e4.jpg"
          ).then(base64 => {
            let link = document.createElement("a");
            link.href = base64;
            link.download = "qrCode.png";
            link.click();
          });

          // console.log(res, 111);
          // this.xiazai1 = res.data.data.filePath;
          // var aa = document.getElementById("a1");
          // aa.href = "http://47.99.59.109/zhoushanManager" + this.xiazai1 + "";
          // console.log(aa.href)
          // aa.click();
          // window.Location.href='http://47.99.59.109/zhoushan/'+this.xiazai1+''
        });
    },
    getUrlBase64(url) {
      return new Promise(resolve => {
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        let img = new Image();
        img.crossOrigin = "Anonymous"; //允许跨域
        img.src = url;
        img.onload = function() {
          canvas.height = 300;
          canvas.width = 300;
          ctx.drawImage(img, 0, 0, 300, 300);
          let dataURL = canvas.toDataURL("image/png");
          canvas = null;
          resolve(dataURL);
        };
      });
    },
    //上传
     getFileUrl() {
      //z这里写url地址
      return this.zs+"/volunteer/apply/upload";
    },
    handleChange(file, fileList) {
      this.fileName = file.name;
    
    },
    //提交
    over() {
      let name1 = this.name;
      let man = this.man;
      let mobile = this.mobile;

      let yzm = this.yzm;
      let sfz = this.sfz;

      let num = /^[1]([3-9])[0-9]{9}$/;
      let sfz_num = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
      let mail_num = /^[A-Za-z0-9-._]+@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,6})$/;
      console.log(11);
      if (!name1 || !year || !mobile || !time || !sfz || !man) {
        this.$message("内容不能为空");
        return;
      }
      // if (!sfz_num.test(sfz)) {
      //   this.$message("身份证格式有误请重新填写");
      //   return;
      // }
      // if (!num.test(mobile)) {
      //   this.$message("电话号码有误请重新填写");
      //   return;
      // }
      this.$api
        .post(
          this.zs +
            "/volunteer/apply?name=" +
            name1 +
            "&sex=" +
            man +
            "=&idtto" +
            sfz +
            "=&mobile=" +
            mobile +
            "&filePath" +
            filePath +
            "=&fileName=" +
            fileName +
            ""
        )
        .then(res => {
          // console.log(res)
          if (res.data.code == "OK") {
            this.$message("提交成功");
          }
        });
    },
    tankuang(index) {
      this.dialogTableVisible = true;
      this.xiabiao = index;
    }
  }
};
</script>
<style scoped>
li {
  list-style: none;
}
p,
ul {
  padding: 0px;
  margin: 0px;
}
.gwgk .title {
  font-size: 30px;
  border-bottom: 2px solid rgb(107, 128, 173);
  color: rgb(107, 128, 173);
  margin-bottom: 50px;
}
.title > p {
  padding-left: 35px;
  margin-bottom: 10px;
}
.gwgk ul,
li,
p {
  padding: 0px;
  margin: 0px;
}

.gwgk .blue {
  color: rgb(25, 67, 119);
}
.zyz_bg {
  margin-bottom: 75px;
}
.center_title {
  background: #f4f4f4;
  margin-bottom: 30px;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
}
.center_title span:nth-child(2) {
  font-size: 20px;
}
.jianjie_content {
  margin-bottom: 60px;
  padding-left: 20px;
  line-height: 45px;
  font-size: 16px;
}
.zhangcheng_content {
  margin-bottom: 80px;
  padding-left: 20px;
}
.inner {
  margin-bottom: 100px;
}
.diyizhang {
  margin-bottom: 20px;
}
.small_title {
  margin-bottom: 60px;
}
ul.zjz_li {
  margin-bottom: 60px;
  padding-left: 15px;
}
ul.zjz_li li {
  border-bottom: 1px solid gray;
  padding: 10px 0px;
}
.ljbm_bg {
  background: url("../../assets/image/ljbm.png") no-repeat;
  width: 375px;
  height: 60px;
  text-align: center;
  margin: auto;
  line-height: 60px;
  cursor: pointer;
}
.ljbm_bg p {
  color: white;
  font-size: 24px;
}
/* tankuang */
.tankuang_bg .content_k {
  width: 565px;
  text-align: center;
  padding-bottom: 40px;
}
.tankuang_bg >>> .el-dialog {
  width: 550px;
}
.tankuang_bg >>> .el-dialog__body {
  padding: 0px;
}
.content_k_title {
  margin-bottom: 41px;
  font-size: 24px;
}
.content_k ul {
  margin: auto;
}
.content_k li {
  margin-bottom: 30px;
}
.input_bg input {
  outline: none;
  width: 350px;
  height: 33px;
  border: none;
  box-sizing: border-box;
  padding-left: 20px;
  background: url("../../assets/image/column/input_bg.png") no-repeat;
}
.content_k li label {
  margin-right: 50px;
  font-size: 18px;
}
.radio {
  box-sizing: border-box;
  padding: 0 44px;
  display: flex;
  justify-content: space-between;
}
.radio p {
  width: 350px;
  display: flex;
  justify-content: flex-start;
}
.radio span {
  display: inline-block;
  margin-right: 20px;
}
.radio input {
  margin-right: 20px;
}
.yanzhengma {
  display: flex;
  box-sizing: border-box;
  padding: 0 45px;
  justify-content: space-between;
  margin-bottom: 55px;
}
.yanzhengma p {
  width: 350px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.yanzhengma input {
  width: 100px;
  height: 35px;
  margin-right: 10px;
}
.shuzi {
  width: 60px;
  height: 35px;
  background: cadetblue;
  margin-right: 10px;
}
.btn {
  background: url("../../assets/image/ljbm.png") no-repeat;
  width: 375px;
  height: 60px;
  text-align: center;
  margin: auto;
  line-height: 60px;
  cursor: pointer;
  color: white;
  font-size: 18px;
}
.xiazai{
  display:flex;
  justify-content: center;
}
.xiazai span {
  display: inline-block;
  width: 100px;
  height: 30px;
  background: darkcyan;
  border-radius: 5px;
  line-height: 30px;
  color: white;
}
.xiazai label {
  font-size: 14px !important;
  color: red;
}
.shangchuan {
  text-align: center;
  margin: auto;
  margin-bottom:50px;
  background: darkgoldenrod;
  border-radius: 5px;
  line-height: 30px;
  color: white;
  width: 200px;
  height: 30px;
}
</style>
